<template>
  <div>
    {{ count }}
  </div>
  <div>
    <button @click="handleClick">add</button>
  </div>
  <div>
    {{ size }}
  </div>
</template>

<script setup>
  import { ref, watch, watchEffect, reactive } from 'vue'
  const count = ref(0)
  const size = ref(100)
  const obj = reactive({
    x: 100, y: 200, z: {
      w: 300
    }
  })
  const handleClick = () => {
    // count.value++
    // obj.x = 200
    // size.value++
    obj.x = 3000
  }
  // watch(count, (newValue) => {
  //   setTimeout(() => {
  //     size.value += newValue
  //   }, 1000)
  // })

  // watchEffect(() => {
  //   size.value += count.value
  // })

  // watch(obj, (newValue) => {
  //   console.log(newValue.x)
  // })

  // watch(
  //   () => count.value,
  //   (newValue) => {
  //     console.log(newValue)
  //   }
  // )

  // watch([
  //   count, 
  //   size
  // ], ([newValue1, newValue2]) => {
  //   console.log(newValue1)
  //   console.log(newValue2)
  // })

  watch(obj.z, (newValue) => {
    console.log(newValue.w)
  })
</script>

<style lang="less" scoped>

</style>
